<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="apply">
    <div class="project">
      <div class="wrapper">
        <!-- 标题开始 -->
        <div class="title">{{project.name}}</div>
        <!-- 标题结束 -->
        <!-- 项目信息开始 -->
        <div class="prop"><strong>项目费用：</strong> {{project.projectMoney}} 元</div>
        <div class="pro"> <strong>起止时间：</strong> {{project.beginTime}} ~ {{project.endTime}} </div>
        <div class="prop"><strong>项目介绍：</strong> {{project.introduce}}</div>
        <!-- 项目信息结束 -->
        <!-- 步骤条开始 -->
        <div style="padding:2em 0">
          <el-steps :active="1" align-center>
            <el-step title="申请报名" description="用户选择自己喜欢的项目进行报名"></el-step>
            <el-step title="管理员确认" description="管理员确认用户报名，为用户开放账号"></el-step>
            <el-step title="用户付款" description="用户登录后可以进行确认，完成付款"></el-step>
            <el-step title="报名完成" description="报名接受后等待管理员线下通知"></el-step>
          </el-steps>
        </div>
        <!-- 步骤条结束 -->
        <!-- 表单开始 -->
        <div class="form">
          <el-form label-width="100px" :rules="rules" :model="form" ref="applyForm">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="telephone">
              <el-input v-model="form.telephone" ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
              <el-date-picker style="width:100%" v-model="form.birth" value-format="timestamp" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 表单结束 -->
        <!-- 操作 -->
        <div class="btns">
          <el-button type="primary" plain size="small" @click="applyHandler">确认报名</el-button>
          <div>
            <el-button type="text" size="mini" @click="$router.push('/applyQuery')">已报名？查看报名进度 &gt;&gt;</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {get,post} from '@/utils/request'
export default {
  data(){
    return {
      project:{},
      form:{
        gender:"male"
      },
      rules:{
        name: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
        telephone: [ { required: true, message: '手机号', trigger: 'blur' } ],
      }
    }
  },
  created(){
    let id = this.$route.query.id;
    this.loadProject(id);
  },
  methods:{
    // 通过项目id查询项目详情
    findDetailsById(){
      // 数据交互
      get('/index/project/findById?id='+this.$route.query.id).then(res=>{
        if(res.status == 200){
          this.project = res.data
        }else{
        this.$message({
          type:"error",
          message:res.message
        })
        }
      })
    },
    applyHandler(){
      this.$refs['applyForm'].validate((valid) => {
        if (valid) {
          let url = "/index/apply/saveOrUpdate"
          this.form.projectId = this.project.id;
          post(url,this.form).then(res => {
            this.$message({ message: res.message, type: 'success' })
            this.form = { gender:"male" }
          })
        } else {
          return false
        }
      })
    },
    // 去申请 
    toApply(){
      this.$router.push({
        path:"/apply",
        query:{id:this.project.id}
      })
    },
    // 加载项目信息
    loadProject(id){
      let url = "/index/project/findById"
      get(url,{id}).then(response => {
        this.project = response.data;
      })
    },
    // 跳转到项目详情页面
    toProjectDetails(){
      this.$router.push({
        path:'/project'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.apply {
  .wrapper {
    width: 1204px;
    margin: 0 auto;
  }
  // 研学项目详情
  .project {
    min-height: 600px;
    padding: 1em 0;
    .wrapper {
      width: 980px;
    }
    .prop {
      line-height: 2em;
    }
    .form {
      width: 500px;
      margin: 0 auto;
      padding: 2em;
    }
    .title {
      font-size: 20px;
      line-height: 3em;
      text-align: center;
      color: #333333;
      font-weight: bold;
    }
    .info {
      text-align: center;
      line-height: 2em;
    }
    .btns {
      text-align: center;
    }
  }
  // 第一行
  .first_row {
    img {
      width: 100%;
    }
  }
}
</style>